<template>
  <el-col class="app-v-center app-column app-flex-1" style="overflow-y: auto;">
    <el-row class="app-h-56px app-fill-width app-h-end app-v-center px-4 app-bb-1px-l2" :gutter="10">
      <el-col :span="4" :xs="10">
        <el-switch
          v-model="openSdk"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用密钥"
          inactive-text="关闭密钥"
          @change="updateSetting"
        />

      </el-col>
      <el-col :span="2" :xs="6" class="mr-2">
        <el-select v-model="type" @change="getDataList">
          <el-option
            key="v0"
            label="全部"
            :value="undefined"
          />
          <el-option
            key="v1"
            label="已使用"
            :value="1"
          />
          <el-option
            key="v2"
            label="未使用"
            :value="0"
          />
        </el-select>
      </el-col>
      <el-button
        type="primary"
        @click="generate()"
      >生成密钥</el-button>
    </el-row>
    <el-table
      :data="dataList"
      class="app-flex-1"
      style="width: 100%;overflow-y: auto;"
    >
      <el-table-column
        prop="sdk"
        align="center"
        label="密钥"
      />
      <el-table-column
        prop="type"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color: scope.row.type === 1 ? '#F60000' : ''
            }"
          >
            {{ scope.row.type === 1 ? '已使用' : '未使用' }}
          </span>
        </template></el-table-column>
    </el-table>
    <el-pagination
      class="mb-10 mt-5"
      style="max-width: 100vw;"
      background
      :current-page.sync="pageNo"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getDataList"
      @current-change="getDataList"
    />
  </el-col>
</template>

<script>
import { getKeys,generateKeys,getConfig,updateSetting } from '@/api/user'
export default {
  data: () => ({
    rules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      userName: [
        { required: true, message: '请输入账号', trigger: 'blur' }
      ],
      role: [
        { required: true, message: '请选择角色', trigger: 'blur' }
      ]
    },
    isEdit: false,
    openSdk: false,
    dataList: [],
    type: undefined,
    pageNo: 1,
    pageSize: 10,
    total: 0
  }),
  mounted() {
    this.getDataList()
    this.getKeyConfig()
  },
  methods: {
    getKeyConfig() {
      getConfig().then(res => {
        if (res.code === 200) {
          this.openSdk = !!res.data.openSdk
        }
      })
    },
    updateSetting() {
      updateSetting({ openSdk: this.openSdk ? 1 : 0 }).then(res => {
        if (res.code === 200) {
          this.getKeyConfig()
        }
      })
    },
    generate() {
      generateKeys({}).then(res => {
        if (res.code === 200) {
          this.getDataList()
        }
      })
    },
    getDataList() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: this.type
      }
      getKeys(params).then(res => {
        if (res.code === 200) {
          this.dataList = res.data.dataList
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
